<template>
  <div class="password-strength-meter">
    <div class="strength-bar-container">
      <div
        class="strength-bar"
        :class="strengthClass"
        :style="{ width: barWidth }"
      ></div>
    </div>
    <div class="strength-info">
      <span class="strength-label" :style="{ color: strengthColor }">
        {{ strengthText }}
      </span>
      <span v-if="showScore" class="strength-score">{{ score }}/100</span>
    </div>
    <div v-if="showDetails && result" class="strength-details">
      <div v-if="result.crackTime" class="detail-item">
        <span class="detail-icon">⏱️</span>
        <span class="detail-text">破解时间: {{ result.crackTime }}</span>
      </div>
      <div v-if="result.suggestions && result.suggestions.length > 0" class="suggestions">
        <div class="suggestions-title">💡 改进建议:</div>
        <ul class="suggestions-list">
          <li v-for="(suggestion, index) in result.suggestions" :key="index">
            {{ suggestion }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { checkPasswordStrength, PasswordStrengthLevel, type PasswordStrengthResult } from '@/utils/password-strength'

interface Props {
  password: string
  showScore?: boolean
  showDetails?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showScore: true,
  showDetails: true
})

const result = ref<PasswordStrengthResult | null>(null)
const score = ref(0)
const strengthLevel = ref(PasswordStrengthLevel.VERY_WEAK)

// 监听密码变化
watch(() => props.password, (newPassword) => {
  if (newPassword) {
    result.value = checkPasswordStrength(newPassword)
    score.value = result.value.score
    strengthLevel.value = result.value.level
  } else {
    result.value = null
    score.value = 0
    strengthLevel.value = PasswordStrengthLevel.VERY_WEAK
  }
}, { immediate: true })

// 计算强度文本
const strengthText = computed(() => {
  if (!result.value) return '未输入'
  return result.value.levelText
})

// 计算强度颜色
const strengthColor = computed(() => {
  const colors = {
    [PasswordStrengthLevel.VERY_WEAK]: '#f5222d',
    [PasswordStrengthLevel.WEAK]: '#fa8c16',
    [PasswordStrengthLevel.MEDIUM]: '#fadb14',
    [PasswordStrengthLevel.STRONG]: '#52c41a',
    [PasswordStrengthLevel.VERY_STRONG]: '#1890ff'
  }
  return colors[strengthLevel.value] || '#999'
})

// 计算强度CSS类
const strengthClass = computed(() => {
  const classes = {
    [PasswordStrengthLevel.VERY_WEAK]: 'very-weak',
    [PasswordStrengthLevel.WEAK]: 'weak',
    [PasswordStrengthLevel.MEDIUM]: 'medium',
    [PasswordStrengthLevel.STRONG]: 'strong',
    [PasswordStrengthLevel.VERY_STRONG]: 'very-strong'
  }
  return classes[strengthLevel.value] || 'very-weak'
})

// 计算进度条宽度
const barWidth = computed(() => {
  return `${score.value}%`
})
</script>

<style scoped>
.password-strength-meter {
  margin-top: 8px;
}

.strength-bar-container {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.strength-bar {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 3px;
}

.strength-bar.very-weak {
  background: linear-gradient(90deg, #f5222d, #ff4d4f);
}

.strength-bar.weak {
  background: linear-gradient(90deg, #fa8c16, #ffa940);
}

.strength-bar.medium {
  background: linear-gradient(90deg, #fadb14, #ffd666);
}

.strength-bar.strong {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.strength-bar.very-strong {
  background: linear-gradient(90deg, #1890ff, #40a9ff);
}

.strength-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.strength-label {
  font-size: 13px;
  font-weight: 600;
}

.strength-score {
  font-size: 12px;
  color: #666;
}

.strength-details {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  margin-bottom: 8px;
}

.detail-icon {
  font-size: 14px;
}

.suggestions {
  margin-top: 8px;
}

.suggestions-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.suggestions-list {
  margin: 0;
  padding-left: 20px;
}

.suggestions-list li {
  color: #666;
  margin-bottom: 4px;
  line-height: 1.5;
}
</style>
